<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" >
                <el-form-item>
                    <el-input  placeholder="名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" >查询</el-button>
                </el-form-item>
                <el-form-item>18565558897
                    <el-button type="primary" >新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-col class="permissManaMain">
            <el-collapse v-model="activeName"
                         v-loading="loading"
                         element-loading-text="正在加载..."
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.8)"
                         accordion
                         @change="change">
                <el-collapse-item :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>可访问的资源</span>
                            <el-button style="float: right; padding: 3px 0;color: #ff0000;" icon="el-icon-delete"
                                       type="text" @click="deleteRole(r)"></el-button>
                        </div>
                        <div>
                            <el-tree
                                    show-checkbox
                                    node-key="id"
                                    ref="tree"
                                    :key="index"
                                    :default-checked-keys="selectedMenus"
                                    :data="allmenus" :props="defaultProps"></el-tree>
                            <div style="display: flex;justify-content: flex-end">
                                <el-button @click="cancelUpdate">取消修改</el-button>
                                <el-button type="primary" @click="doUpdate(r.id,index)">确认修改</el-button>
                            </div>
                        </div>
                    </el-card>
                </el-collapse-item>
            </el-collapse>
        </el-col>
    </section>
</template>

<script>
    export default {
        name: "PermissMana",
        data() {
            return {
                role: {
                    name: '',
                    nameZh: ''
                },
                allmenus: [{"id":1,"url":null,"path":null,"component":null,"name":"所有","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":[{"id":2,"url":null,"path":null,"component":null,"name":"员工资料","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":[{"id":7,"url":null,"path":null,"component":null,"name":"基本资料","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":8,"url":null,"path":null,"component":null,"name":"高级资料","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null}],"roles":null},{"id":3,"url":null,"path":null,"component":null,"name":"人事管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":[{"id":9,"url":null,"path":null,"component":null,"name":"员工资料","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":10,"url":null,"path":null,"component":null,"name":"员工奖惩","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":11,"url":null,"path":null,"component":null,"name":"员工培训","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":12,"url":null,"path":null,"component":null,"name":"员工调薪","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":13,"url":null,"path":null,"component":null,"name":"员工调动","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null}],"roles":null},{"id":4,"url":null,"path":null,"component":null,"name":"薪资管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":[{"id":14,"url":null,"path":null,"component":null,"name":"工资账套管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":15,"url":null,"path":null,"component":null,"name":"员工账套设置","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":16,"url":null,"path":null,"component":null,"name":"工资表管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":17,"url":null,"path":null,"component":null,"name":"月末处理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":18,"url":null,"path":null,"component":null,"name":"工资表查询","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null}],"roles":null},{"id":5,"url":null,"path":null,"component":null,"name":"统计管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":[{"id":19,"url":null,"path":null,"component":null,"name":"综合信息统计","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":20,"url":null,"path":null,"component":null,"name":"员工积分统计","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":21,"url":null,"path":null,"component":null,"name":"人事信息统计","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":22,"url":null,"path":null,"component":null,"name":"人事记录统计","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null}],"roles":null},{"id":6,"url":null,"path":null,"component":null,"name":"系统管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":[{"id":23,"url":null,"path":null,"component":null,"name":"基础信息设置","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":24,"url":null,"path":null,"component":null,"name":"系统管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":25,"url":null,"path":null,"component":null,"name":"操作日志管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":26,"url":null,"path":null,"component":null,"name":"操作员管理","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":27,"url":null,"path":null,"component":null,"name":"备份恢复数据库","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null},{"id":28,"url":null,"path":null,"component":null,"name":"初始化数据库","iconCls":null,"meta":null,"parentId":null,"enabled":null,"children":null,"roles":null}],"roles":null}],"roles":null}],
                activeName: -1,
                selectedMenus: [],
                roles: [{"id":1,"name":"ROLE_manager","nameZh":"部门经理"},{"id":2,"name":"ROLE_personnel","nameZh":"人事专员"},{"id":3,"name":"ROLE_recruiter","nameZh":"招聘主管"},{"id":4,"name":"ROLE_train","nameZh":"培训主管"},{"id":5,"name":"ROLE_performance","nameZh":"薪酬绩效主管"},{"id":6,"name":"ROLE_admin","nameZh":"系统管理员"},{"id":13,"name":"ROLE_test2","nameZh":"测试角色2"},{"id":14,"name":"ROLE_test1","nameZh":"测试角色1"},{"id":17,"name":"ROLE_test3","nameZh":"测试角色3"},{"id":18,"name":"ROLE_test4","nameZh":"测试角色4"},{"id":19,"name":"ROLE_test4","nameZh":"测试角色4"},{"id":20,"name":"ROLE_test5","nameZh":"测试角色5"},{"id":21,"name":"ROLE_test6","nameZh":"测试角色6"}],
                loading: false,
                globalLoading: false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        mounted() {
            this.initRoles();
        },
        methods: {
            deleteRole(role) {
                this.$confirm('此操作将永久删除【' + role.nameZh + '】角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/permiss/role/" + role.id).then(resp => {
                        if (resp) {
                            this.initRoles();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            doAddRole() {
                if (this.role.name && this.role.nameZh) {
                    this.globalLoading = true;
                    this.postRequest("/system/basic/permiss/role", this.role).then(resp => {
                    this.globalLoading = false;
                        if (resp) {
                            this.role.name = '';
                            this.role.nameZh = '';
                            this.initRoles();
                        }
                    })
                } else {
                    this.$message.error('数据不可以为空');
                }
            },
            cancelUpdate() {
                this.activeName = -1;
            },
            doUpdate(rid, index) {
                let tree = this.$refs.tree[index];
                let selectedKeys = tree.getCheckedKeys(true);
                let url = '/system/basic/permiss/?rid=' + rid;
                selectedKeys.forEach(key => {
                    url += '&mids=' + key;
                })
                this.putRequest(url).then(resp => {
                    if (resp) {
                        this.activeName = -1;
                    }
                })
            },
            change(rid) {
                if (rid) {
                    this.initAllMenus();
                    this.initSelectedMenus(rid);
                }
            },
            initSelectedMenus(rid) {
                // this.getRequest("/system/basic/permiss/mids/" + rid).then(resp => {
                //     if (resp) {
                //         this.selectedMenus = resp;
                //     }
                // })
            },
            initAllMenus() {
                this.getRequest("/org/menu/list").then(resp => {
                    if (resp) {
                        this.allmenus = resp.data;
                    }
                })
            },
            initRoles() {
                this.loading = true;
                this.getRequest("/org/role/list").then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.roles = resp.data;
                    }
                })
            }
        }
    }
</script>

